<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" 	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
								xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/"
								xmlns:s="http://www.w3.org/2001/XMLSchema"
								xmlns:soap="http://schemas.xmlsoap.org/wsdl/soap/">

    <!-- WSDL transformation document -->
    <xsl:include href="file:///C:/Users/csbeks/Documents/Visual Studio 2008/Projects/Novice/Novice1/Services/Transformation/WSDL/wsdl-t.xsl"/>

    <xsl:output method="html" encoding="utf-8"/>

    <!-- Steps in the task-->
    <xsl:variable name="Tasks" select="//*[@step]"/>

    <!-- Task Model -->
    <xsl:variable name="TM-OLH" select="document('file:///C:/Users/csbeks/Documents/Visual Studio 2008/Projects/Novice/Novice1/Knowledge Base/Task Model/TaskModel.xml')"/>

    <!-- Variable with all elements that hold a @wsdl attribute-->
    <xsl:variable name="reliants" select="$TM-OLH//*[@reliant]"/>

    <!-- Applied Javascript (Frameworks etc.)-->
    <xsl:variable name="tab.jscript">
        <![CDATA[
  (function(){

  var gc = function(s){ return document.getElementsByClassName(s); };
  if(!document.getElementsByClassName) {
    var all = document.getElementsByTagName('*');
    gc = function(c){
      var e=[]; c=' '+c+' ';
      for(var i=0; i<all.length; i++)
        if((' '+all[i].className+' ').indexOf(c)>=0)
          e.push(all[i]);
      return e;
    }
  }

  var w = function(id){ var d; return (d=document.getElementById(id))&&[d]||gc(id); },
  bind = function(f){ var self=this; return function(){ return f.apply(self, arguments); }; },
  map = function(f,e,a) { for(var i=0; i<e.length; i++) f.apply(e[i],a||[]); },
  add = function(c) { this.className += c; },
  remove = function(c) { this.className = this.className.replace(new RegExp("(^|\\s)" + c + "(\\s|$)",'g'),''); } ,
  hide = function() { this.style.display="none"; },
  show = function() { this.style.display="block"; };

  var tab = function(id,a,e,s) {
    map(remove,a,[s.s]);
    add.call(this,s.s);
    map(hide,e);
    map(show,w(id));
  }

  nanotabs = function(s){
    var i, s=s||{}, o="cesdf".split(''); 
    for(i in o) s[o[i]]=s[o[i]]||nanotabs.settings[o[i]];
    var c=w(s.c), f=function(){
      var t=this,o=t[0],a=[t[1],t[2],t[3],t[4]];
      if( !s.f || s.f.apply(o,a)!==false ) tab.apply(o,a);
      return false;
    }
    for(i=0; i<c.length; i++) {
      var x=0, e=[], a=[], h=[], t=c[i].getElementsByTagName("a");
      for(var j=0; j<t.length; j++)
        if(t[j].href.match(/#/)) {
          h.push(t[j].href.split('#')[1]);
          if(typeof s.d=="string" && h[x]==s.d) s.d=x;
          a.push(t[j]);
          var g = w(h[x]);
          for(var k=0; k<g.length; k++) e.push(g[k]);
          x++;
        }
      for(var j=0; j<a.length; j++)
        a[j]['on'+s.e] = bind.call([a[j],h[j],a,e,s],f);
      if(typeof s.d=="number" && s.d>=0) tab.call(a[s.d],h[s.d],a,e,s);
    }
  }

  nanotabs.settings = { c:"nanotabs", e:"click", s:"selected", d:0, f:false };
  nanotabs();

})();


]]>

    </xsl:variable>

    <!-- Applied Stylesheet (tabs etc.) -->
    <xsl:variable name="tab.css">
        * { margin:0px; padding:0px; }
        img { border:0px; }
        a { outline:none; }
        body { background:#FFF; font:11pt Arial; }
        h1 { font:20pt Georgia; color:#000; }
        h2 { font:14pt Georgia; color:#888; }
        h3 { font:14pt Georgia; color:#222; }
        .nanotabs { text-align:left; width:500px; margin:20px auto 0; }
        .tabs { margin:20px 0 60px; text-align:center;  }
        /*  div { clear:left; } */
        .tabs li { float:left; list-style:none; }
        .tabs li a { display:block; padding:4px 6px; background:#000; color:#fff; font:bold 11pt Verdana; text-decoration:none; }
        .tabs li a:hover { background:#EEE; color:#000; }
        .tabs li a.selected { background:#555; color:#FFF; }
        .nanotabs div { display:none; background:#EEE; border-top:1px solid #555; border-bottom:1px solid #888; padding:8px; *padding-top:4px; letter-spacing:1px; }
        .t-left  { background:#FFF; display:block; text-indent:-2000em; position:relative; top:0; width:1px; height:1px; left:1px; margin-left:-1px; }
        .t-right { background:#FFF; display:block; text-indent:-2000em; position:relative; top:0; width:1px; height:1px; right:1px; margin-right:-1px; }

    </xsl:variable>

    <!-- Applied Stylesheet (Page Styling) -->
    <xsl:variable name="css">

        /**
        =========================================
        RESET
        =========================================
        */

        body {
        margin: 0;
        padding: 0;
        height: auto;
        color: black;
        background-color: #ffffff;
        font: normal 80%/120% Arial, Helvetica, sans-serif;
        }
        /**
        =========================================
        CONTENT
        =========================================
        */
        h4,h3,h2,h1{ 			/* matches "/container" */
        margin:5px;
        }

        h3,h4{
        margin-bottom:10px;
        }

        /**************************** START Header Stylings ************************************/
        /*.h2{
        width:100%;
        color:black;
        background-color: #ccc;
        border-bottom:1px #000 solid;
        padding: 15px;
        }*/

        /**************************** END Header Stylings ************************************/


        .l-container{ /* container holding only leaf nodes */
        margin:0px 5px;
        padding:5px;
        /*border-bottom:1px solid #000;
        background-color: gray;		*/
        }

        .container{
        margin:0px 10px;
        background-color: #ccc;
        }

        .border{
        margin:15px;
        border:1px solid #000;
        }


        h3.container{
        margin:0px;
        }

        .header{
        margin:5px;
        }
        .leaf{
        margin:15px;
        border:1px solid #000;
        /*	background-color: gray;		*/
        }

        .border{
        border:solid 1px #eeeeee;
        }
        
        =========================================
        LAYOUT
        =========================================
        .OH{	/* ORDERED HORIZONTAL GROUP */
        float:left;
        display:inline;
        width:auto;
        }

        .OV{	/* ORDERED VERTICAL GROUP */

        display:block;
        width:auto;
        }

        .PH{	/* PLAIN VERTICAL GROUP */
        }
        .PV{	/* PLAIN HORIZONTAL GROUP */
        }
        .P{		/* PLAIN GROUP */
        }
        .V{		/* ORDERED GROUP */
        }

        .left{
        float:left;
        }

        .right{
        float:right;
        }

        =========================================
        CONTROLS
        =========================================
        .button{
        background-color:blue;
        color:white;
        border:1px solid #000;
        padding:5px;
        }

        .buttonholder{
        width:100%;

        }

        =========================================
        Generated HTML
        =========================================
        .operation{
        margin:0 0 5px 0;
        padding:0 0 5px 5px;
        }
        .input{
        width:auto;
        height:auto;
        margin:5px 5px 0px 5px;
        position:relative;
        }
        .inputName{
        width:120px;
        display:inline;
        float:left;
        font-weight:normal;
        }

        input, select{
        width:170px;
        height: 20px;
        }

        input.radio{
        margin:0px 5px 5px 5px;
        padding:0;
        width:15px;
        }

        textArea{

        padding:0;
        width:300px;
        height:100px;

        overflow: scroll;
        overflow-y: scroll;
        overflow-x: hidden;
        overflow:-moz-scrollbars-vertical;
        }

        .listBox{

        padding:0;
        width:300px;
        height:100px;


        }

        .submitButton{
        color:#ffffff;
        background-color:#003366;
        width:100px;
        float:right;
        margin-right:40px;
        margin-bottom:20px;
        margin-top:20px;
        border:1px #000000 solid;
        padding:5px;
        text-align:center;
        }

        .submitButton:hover{
        color:#003366;
        background-color:#ffffff;
        }

    </xsl:variable>

    <!-- Root -->
    <xsl:template match="/">
        <xsl:variable name="layout" select="@layout"/>
        <xsl:variable name="name" select="@name" />

       <script type="text/javascript">
            /* ======================================================================================
            Jscript
            ====================================================================================== */
            <xsl:value-of select="$tab.jscript" disable-output-escaping="yes"/>
        </script>

       <style type="text/css">
            /* ======================================================================================
            CSS
            ====================================================================================== */
            <xsl:value-of select="$css" disable-output-escaping="yes"/>
        </style>


        <div class="left-pane left">
            <xsl:apply-templates select="//container" mode="left-pane"/>
        </div>

        <div class="tabs left">
            <div class="nanotabs">
                <ul>
                    <li class="t-left">.</li>
                    <xsl:for-each select="$Tasks"><!-- Generate Tabs -->
                        <li><a href="#{current()/@id}"><xsl:value-of select="current()/@name"/></a></li>
                    </xsl:for-each>
                    <li class="t-right">.</li>
                </ul>
                <xsl:for-each select="$Tasks">
                    <div id="{current()/@id}" class="t-content">
                        <xsl:apply-templates select="container[container]" />
                    
                        <!-- To place the submit button outside the tabs, move this section outside the last div-->
                        <!-- If current node is root, then add the next step button here -->
                        <xsl:if test="position()=last()">
                            <div class="buttonholder">
                                <div class="submitButton" onClick="TaskComplete()">
                                    <xsl:value-of select="@onComplete"/>
                                </div>
                            </div>
                        </xsl:if>

                    </div>                
                </xsl:for-each>
            </div>
        </div>

        <!--javascript for reliant items: for each element with the attribute 'reliant', generate jscript that changes its value based on the value in the element it relies on-->
        <script type="text/javascript">
            <xsl:for-each select="$reliants">
                <![CDATA[                   
                                        $("#]]><xsl:value-of select="current()/@reliant"/> <![CDATA[").livequery('change', function(e){
                        //invokes the dependent method with the value from the independent
                        //parameters: parent, child, wsdl
                        fillDependent(']]><xsl:value-of select="current()/@reliant"/><![CDATA[',']]><xsl:value-of select="current()/@operation"/><![CDATA[',']]><xsl:value-of select="current()/@wsdl"/><![CDATA[', false);
                        e.stopPropagation();
                        return false; 
                    });
                    
                    $("#]]><xsl:value-of select="current()/@reliant"/> <![CDATA[").livequery('keypress', function(e){
                        //invokes the dependent method with the value from the independent
                        //parameters: parent, child, wsdl
                         if (e.which == 13) {
                            fillDependent(']]><xsl:value-of select="current()/@reliant"/><![CDATA[',']]><xsl:value-of select="current()/@operation"/><![CDATA[',']]><xsl:value-of select="current()/@wsdl"/><![CDATA[', false);
                            e.stopPropagation();
                            return false;
                         } 
                    });
                    
             ]]>
            </xsl:for-each>
        </script>

    </xsl:template>


    <xsl:template match="container[container]" name="tab">
        <xsl:variable name="layout" select="@layout"/>
        <xsl:variable name="border" select="@border"/>
        <div class="{$border} {$layout} left">
            <xsl:apply-templates select="container" />
        </div>
    </xsl:template>

    <!-- template for leaf container -->
    <xsl:template match="container">
        <xsl:variable name="layout" select="@layout"/>
        <xsl:variable name="cont.name" select="@name"/>
        <!-- Stores the count of times this particular container is used in the OLH -->
        <xsl:variable name="count" select="count(//*[@name = $cont.name])" />
        <div class="l-container {$layout}">
            <xsl:choose>
                <!-- Add loader image to dependent-->
                <xsl:when test="$TM-OLH//*[@name = $cont.name]/@reliant">
                    <div class="depholderdiv">
                        <img class="deploader" src="css/deploader.gif" alt="loading..."/>
                    </div>
                </xsl:when>
            </xsl:choose>
            <xsl:if test="$TM-OLH//*[@name = $cont.name]">
                <!-- get wsdl url -->
                <xsl:variable name="cont.wsdl.loc" select="$TM-OLH//*[@name = $cont.name]/@wsdl"/>
                <!-- load wsdl (xml) file into variable -->
                <xsl:variable name="cont.wsdl" select="document($cont.wsdl.loc)"/>
                <!-- Apply transformation to relevant wsdl elements-->
                <xsl:apply-templates select="$cont.wsdl/wsdl:definitions/wsdl:portType"/>
            </xsl:if>
        </div>
    </xsl:template>
    <!-- 		HOW IT WORKS:
		
		For every container that has a wsdl attribute, 
		1.	Check for element with the same name in the task model. 
		2.	If names are equal, check for wsdl. if exists, get the wsdl location from the attribute
		3.	import it as xml
		4.	transform it using the transformation xsl: $WSDL-T
	-->
    <xsl:template match="container" mode="left-pane">
        <xsl:variable name="layout" select="@layout"/>
        <xsl:variable name="cont.name" select="@name"/>
        <!-- Stores the count of times this particular container is used in the OLH -->
        <xsl:variable name="count" select="count(//*[@name = $cont.name])" />
        <xsl:choose>
            <!-- If we have a container that repeats more times than the number of tasks in the model, then flag and place in visible holder on left of screen. -->
            <xsl:when test="$count &gt;= count($Tasks)">
                <!-- Place this the visible holder on the left -->
                <xsl:if test="not($cont.name = preceding::*/@name)">
                    <div class="l-container {$layout}">
                        <!--<span class="header"><xsl:value-of select="@name"/></span>:"<xsl:value-of select="$layout"/>" -->
                        <xsl:if test="$TM-OLH//*[@name = $cont.name]">
                            <!-- get wsdl url -->
                            <xsl:variable name="cont.wsdl.loc" select="$TM-OLH//*[@name = $cont.name]/@wsdl"/>
                            <!-- load wsdl (xml) file into variable -->
                            <xsl:variable name="cont.wsdl" select="document($cont.wsdl.loc)"/>
                            <!-- Apply transformation to relevant wsdl elements-->
                            <xsl:apply-templates select="$cont.wsdl/wsdl:definitions/wsdl:portType"/>
                            <!-- 
				                NOTE: Find a way of only storing the service name instead of the entire url.
				                e.g. "SearchCustomer" instead of "http://localhost:12000/Services/SearchCustomer.asmx?WSDL".
            					
				                Files: TaskModel.xml and OLH.xsl
			                -->
                        </xsl:if>
                    </div>
                </xsl:if>
            </xsl:when>
        </xsl:choose>
    </xsl:template>
</xsl:stylesheet>